<template>
  <div class="order-container">
    <div class="order-list">
      <div class="tips">商品信息</div>
      <view class="product-list">
        <view class="product-item" v-for="(product, index) in orderList" :key="index">
          <view class="product-main">
            <image class="product-image" :src="product.image" mode="aspectFill" />
            <view class="product-content">
              <view>
                <view class="product-name">{{ product.productName }}</view>
                <view class="product-price">¥{{ product.price.toFixed(2) }}</view>
              </view>
              <view class="product-total">共{{ product.quantity }}件</view>
            </view>
          </view>
          <view class="product-variants">
            <view class="variant-item" v-for="(variant, vIndex) in product.specList" :key="vIndex">
              <view class="variant-label">{{ variant.spec }} ¥{{ variant.price }}</view>
              <view class="variant-quantity">×{{ variant.totalQuantity }}</view>
            </view>
          </view>
        </view>
      </view>
      <!-- 合计 -->
      <div class="order-total">
        <div class="total">共{{ totalQuantity }}件</div>
        <div class="num">
          合计:<span style="color: #c17a32">￥{{ totalAmount }}</span>
        </div>
      </div>
    </div>
    <div class="user-info">
      <div class="user-info-title">客户信息</div>
      <div class="info" v-if="customerInfo.mobile">
        <div class="info-line">
          <span>{{ customerInfo.name || "张三" }} {{ customerInfo.mobile || "188888888" }}</span>
        </div>
        <div class="info-line member" v-if="customerInfo.userId">
          <div>已是会员</div>
          <div>余额：{{ customerInfo.balance }}</div>
        </div>
        <div class="member" v-else>新会员</div>
      </div>
      <div class="empty" v-if="!customerInfo.mobile">未填写</div>
    </div>
    <view class="tab-list">
      <u-tabs :list="tabList" :current="currenttab" @click="onTabChange" lineColor="#c4996c" :keyName="name"
        itemStyle="flex:1; height: 48px;" :activeStyle="{
          color: '#c4996c',
          fontWeight: 'bold'
        }" :inactiveStyle="{
          color: '#333',
          fontSize: '28rpx'
        }"></u-tabs>
      <view v-if="currenttab == 0">
        <swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500">
          <swiper-item v-for="(url, index) in imageUrls" :key="index">
            <image class="image-item" :src="url" mode="aspectFill" />
          </swiper-item>
        </swiper>
      </view>
      <view v-if="currenttab == 1" style="margin-top:30rpx;">
        现金应收款:￥{{ totalAmount }}
      </view>
      <view v-if="currenttab == 2">
        消费金额:￥{{ totalAmount }}
      </view>
    </view>
    <!-- 底部结算栏 -->
    <view class="footer">
      <view class="next-btn">上一步</view>
      <view class="checkout-btn" @click="handlePay" :disabled="loading">
        <up-loading-icon class="loading" color="#fff" size="16" :show="loading"></up-loading-icon>
        <text>确认支付</text>
      </view>
    </view>
    <!-- 审核成功 -->
    <view v-if="!AccountStatus" class="w100 submitTips">
      <view class="w100 mt-90 flex justify-center items-center flex-wrap">
        <view class="w100 mt-20 flex justify-center items-center">
          <image class="logo" :src="IMG_URL2 + 'common/check-circle.svg'" />
        </view>
        <view class="mt-20 f-24 white titinfo">添加成功</view>
      </view>
      <view class="complete-btn" @click="completeFun">完成</view>
    </view>


  </div>
</template>
<script setup>
import { ref } from "vue";
import { shopApi } from "@/api";
const orderList = ref([]);
const currenttab = ref(0);
import { useExchangeStore } from '@/store/modules/exchange' // Add this import
import { storeToRefs } from 'pinia'
const exchangeStore = useExchangeStore()
const loading = ref(false);
const { scanData } = storeToRefs(exchangeStore)
let AccountStatus = ref(true);
// 支付方式:1-当面支付 2-现金支付 3-余额支付
const tabList = ref([
  {
    name: "当面支付",
    type: 1
  },
  {
    name: "现金支付",
    type: 2
  },
  {
    name: "余额支付",
    type: 3
  }
]);
const imageUrls = ref([])
const customerInfo = ref({});
const totalQuantity = ref('');
let totalAmount=ref('')
// 切换tab
const onTabChange = (e) => {
  console.log(e);
  currenttab.value = e.type - 1;
};
const getShopReceivePaymentInfo = () => {
  shopApi.SHOPGETSHOPRECEIVEPAYMENTINFO().then(res => {
    if (res.code == 200) {
      // imageUrl.value = res.result.imgUrl
      imageUrls.value = res.result.imgUrl ? res.result.imgUrl.split(',') : [];
    } else {
      uni.showToast({ title: res.errMsg, icon: "none" });
    }
  })
}

const handlePay = () => {
  if(orderList.value.length==0){
    uni.showToast({ title: '请先添加商品', icon: "none" });
    return
  }else{
    let params = {
      payType: currenttab.value + 1,
      price: totalAmount.value,
      productPrice: totalAmount.value,
      products: [],
      userId: customerInfo.value&&customerInfo.value.userId?customerInfo.value.userId:''
    }
    orderList.value.forEach(item => {
      item.specList.forEach(nitem => {
        params.products.push({
          image: item.image,
          name: item.productName,
          otherBrand: false,
          price: nitem.price,
          productCode: item.productCode,
          productId: item.productId,
          productSkuCode: item.productSkuCode,
          productSkuId: item.productSkuId,
          quantity: item.inStockQuantity,
          spec:nitem.spec,
          totalPrice: item.totalPrice
        })
      })
      
    })
 
    loading.value = true;
    shopApi.SCANPAYCREATEORDER(params).then(res => {
      loading.value = false;
      if (res.code == 200) {

      } else {
        uni.showToast({ title: res.errMsg, icon: "none" });
      }
    })
  }
}
const completeFun = () => {
	uni.navigateBack({
      delta: 2
  });
}

onLoad((options) => {
  if (options.data) {
    orderList.value =scanData.value.productsList
    totalQuantity.value = scanData.value.totalQuantity
    totalAmount.value = scanData.value.totalAmount
    currenttab.value = Number(scanData.value.paymentMethod-1)
    customerInfo.value = scanData.value.customerInfo;
  }
  console.log(scanData.value.productsList,'scanData.value.productsList')
  getShopReceivePaymentInfo()
});
</script>
<style scoped lang="scss">
.order-container {
  padding: 20rpx;
  box-sizing: border-box;
  background: #f5f5f5;
  min-height: 100vh;
}

.order-list {
  border-radius: 16rpx;
  background-color: #fff;
  padding: 20rpx 24rpx;
  box-sizing: border-box;
  overflow: hidden;

  .tips {
    font-size: 24rpx;
    color: #000;
  }

  .product-list {

    .product-item {
      padding: 20rpx 0px;
      border-bottom: 2rpx solid #f5f5f5;

      .product-main {
        display: flex;
        margin-bottom: 20rpx;

        .product-image {
          width: 120rpx;
          height: 120rpx;
          background-color: #f5f5f5;
          margin-right: 20rpx;
        }

        .product-content {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: space-between;

          .product-name {
            font-size: 28rpx;
            color: #333;
            margin-bottom: 10rpx;
          }

          .product-price {
            font-size: 28rpx;
            color: #333;
            margin-bottom: 10rpx;
          }

          .product-total {
            font-size: 24rpx;
            color: #999;
          }
        }
      }

      .product-variants {
        .variant-item {
          display: flex;
          justify-content: space-between;
          font-size: 24rpx;
          color: #666;
          margin-bottom: 24rpx;

          &:last-child {
            margin-bottom: 0;
          }

          .variant-quantity {
            color: #999;
          }
        }
      }
    }
  }

  .order-total {
    display: flex;
    align-items: center;
    margin-top: 20rpx;
    float: right;

    .total {
      font-size: 24rpx;
      margin-right: 10rpx;
    }

    .num {
      font-size: 28rpx;
    }
  }
}

.user-info {
  margin-top: 20rpx;
  border-radius: 16rpx;
  background-color: #fff;
  padding: 20rpx 24rpx;
  box-sizing: border-box;

  .user-info-title {
    font-size: 24rpx;
    color: #00000099;
  }

  .empty {
    margin-top: 24rpx;
    font-size: 24rpx;
    color: #000000;
  }

  .info {
    margin-top: 24rpx;

    .info-line {
      font-size: 24rpx;
      color: #000000;
      margin-bottom: 10rpx;
    }

    .member {
      margin-top: 20rpx;
      color: #d68e44;
      display: flex;
      justify-content: space-between;
      font-size: 28rpx;
    }
  }
}

.tab-list {
  margin-top: 20rpx;
  border-radius: 16rpx;
  background-color: #fff;
  padding: 20rpx 24rpx;
  box-sizing: border-box;

  .swiper {
    width: 100%;
    height: 400rpx;
  }

  .image-item {
    width: 100%;
    height: 100%;
    background-color: rgba(243, 243, 243, 1);
    border-radius: 12rpx;
    overflow: hidden;
    object-fit: cover;
  }
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  background: #fff;
  padding: 10rpx 24rpx 30rpx;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);

  .next-btn {
    flex: 1;
    color: rgba(214, 142, 68, 1);
    padding: 8rpx 40rpx;
    border-radius: 80rpx;
    font-size: 28rpx;
    border: 1rpx solid rgba(214, 142, 68, 1);
    margin-right: 30rpx;
    text-align: center;
  }

  .checkout-btn {
    flex: 2;
    background: rgba(214, 142, 68, 1);
    color: #fff;
    padding: 8rpx 40rpx;
    border-radius: 80rpx;
    font-size: 28rpx;
    text-align: center;
    display: flex;
    justify-content: center;
  }
}

.submitTips {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  background-color: rgba(255, 255, 255, 1);

  .submitTipsBox {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .complete-btn {
    background: rgba(253, 236, 219, 1);
    font-family: PingFang SC;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    text-align: center;
    color: rgba(145, 74, 0, 1);

    width: 319px;
    margin: 90px auto 0px;
    padding: 12px 20px 12px 20px;
    box-sizing: border-box;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
